<template>
    <div :class="['_tcplay-video']">
        <div class="_tcplay-video-instance">

        </div>
    </div>
</template>

<script>
import { liveStatusMap } from '@/enums/live';
import liveInfo from '@/mixins/liveInfo';
import streamInfo from '@/mixins/streamInfo';
import TCPlayer from 'tcplayer.js';
export default {
    props: {
        playUrl: String,
        coverUrl: String,
    },
    data() {
        return {
            playerId: `player`, // 播放器实例ID
            player: null,
        };
    },
    mixins: [liveInfo, streamInfo],
    beforeDestroy() {
        if (this.playerErrorTimer) {
            clearTimeout(this.playerErrorTimer);
        }
        if (this.player) {
            this.player.dispose()
        }
        document.removeEventListener('visibilitychange', this.handleVisibilityChange);
    },
    mounted() {
        const video = document.createElement("video")
        video.setAttribute("id", "video");
        video.setAttribute("width", "100%");
        video.setAttribute('playsinline', true);
        video.setAttribute('webkit-playsinline', true)// video的属性
        document.querySelector('._tcplay-video-instance').appendChild(video);//为这个盒子中添加一个video元素

        document.addEventListener('visibilitychange', this.handleVisibilityChange);
    },
    methods: {
        initPlayer() {
            if (this.player) {
                this.player.src(this.playUrl)
                this.player.play()
                return
            }
            this.player = TCPlayer('video', {
                sources: [{
                    src: this.playUrl, // 播放地址
                }],
                autoplay: false,
                poster: this.coverUrl,
                live: this.mix_liveStatus === liveStatusMap['直播中'],
                loop: this.mix_liveStatus === liveStatusMap['直播中'] ? false : true,
                controls: false,
                licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1323678987_1/v_cube.license',
            });
            this.player.on('loadedmetadata', () => {
                this.styleFit();
            });
            this.player.on('error', () => {
                // todo
            });
            this.player.on('pause', (event) => {
                // todo
            });
            this.player.on('play', () => {
                // todo
            });
        },
        handleVisibilityChange() {
            if (document.visibilityState === 'visible') {
                if (this.player && this.player.paused()) {
                    this.player.play()
                }
            }
        },

        styleFit() {
            const videoDom = document.querySelector(`.tcplayer video`);
            videoDom.style.objectFit = 'cover !important';
            videoDom.style.height = `100% !important`;
            videoDom.style.marginTop = `0 !important`;
            setTimeout(() => {
                const { videoHeight, videoWidth } = videoDom;

                if (videoHeight && videoWidth) {
                    if (videoHeight >= videoWidth) {
                        // 竖屏视频
                        videoDom.style.objectFit = 'cover !important';
                        videoDom.style.height = `100% !important`;
                        videoDom.style.marginTop = `0 !important`;
                    } else {
                        // 横屏视频
                        const height = (videoHeight / videoWidth) * 375;
                        videoDom.style.objectFit = 'contain !important';
                        videoDom.style.height = `${height}px !important`;
                        videoDom.style.marginTop = `159px !important`;
                    }
                }
            }, 500);
        },
        play() {
            this.player.play();
        },
    },
};
</script>

<style lang="scss" scoped>
._tcplay-video {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #3b3b3b;

    ._tcplay-video-instance {
        width: 100% !important;
        height: 100% !important;
    }

    ::v-deep .tcplayer {
        width: 100% !important;
        height: 100% !important;

    }


    ::v-deep .vjs-poster {
        background-size: 100% 100%;
    }

    ::v-deep .vjs-menu-content {
        display: none;
    }

    ::v-deep .video-js .vjs-modal-dialog {
        display: none !important;
    }
}
</style>